import{_ as o}from"./index.vue_vue_type_style_index_0_lang2.js";import{d as s,e as t,r as d,P as i,Q as l,$ as m,K as c,a2 as k,a5 as p,R as a}from"./elementPlusModules.js";const u=a("p",null,"开启树结构需要设置表格属性 enabled-tree 为 true, 并且在对应列设置 treeNode 为 true",-1),y=a("p",null,"父子层级树结构数据使用平铺数据, 需要设置表格属性 tree-transform 为 true , 作为字节点数据需要设置 parentKey 引用父节点的 key",-1),N=a("p",null,"如需改变表格行的 key 与 父节点的 key 需要设置 row-key(默认为 id) 和 parent-key(默认为 parentId) 属性",-1),b=s({__name:"Tree",setup(g){const n=t(`
<template>
  <MerakXTable
    :columns-by-store="JSON.parse(JSON.stringify(state.columns))"
    :columns="state.columns"
    :data="state.data"
    :enabled-tree="true"
    :pagination="false"
  ></MerakXTable>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";

import MerakXTable, { MerakXTableColumn } from "../../../../../components/MerakXTable";

const state = reactive<{
  columns: MerakXTableColumn[];
  data: Record<string, any>[];
}>({
  columns: [
    { field: "name", title: "Name", treeNode: true },
    { field: "age", title: "Age" },
    { field: "address", title: "Address" }
  ],
  data: [
    {
      id: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
      description: "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
    },
    {
      id: "2",
      parentId: "1",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
      description: "My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."
    },
    {
      id: "3",
      name: "Not Expandable",
      age: 29,
      address: "Jiangsu No. 1 Lake Park",
      description: "This not expandable"
    },
    {
      id: "4",
      name: "Joe Black",
      age: 32,
      address: "Sydney No. 1 Lake Park",
      description: "My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park."
    }
  ]
});
<\/script>
`),e=d({columns:[{field:"name",title:"Name",treeNode:!0},{field:"age",title:"Age"},{field:"address",title:"Address"}],data:[{id:"1",name:"John Brown",age:32,address:"New York No. 1 Lake Park",description:"My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."},{id:"2",parentId:"1",name:"Jim Green",age:42,address:"London No. 1 Lake Park",description:"My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."},{id:"3",name:"Not Expandable",age:29,address:"Jiangsu No. 1 Lake Park",description:"This not expandable"},{id:"4",name:"Joe Black",age:32,address:"Sydney No. 1 Lake Park",description:"My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park."}]});return(r,f)=>(i(),l(p,null,[u,y,N,m(c(o),{"columns-by-store":JSON.parse(JSON.stringify(e.columns)),columns:e.columns,data:e.data,"enabled-tree":!0,"enabled-scroll":!1,"tree-transform":!0,pagination:!1},null,8,["columns-by-store","columns","data"]),k(r.$slots,"default",{html:n.value})],64))}});export{b as _};
